<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.name" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="state.queryForm.submitType" placeholder="提交类型" clearable>
					<el-option v-for="item in submitOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'data-development:jarpackage-manage:save'" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'data-development:jarpackage-manage:delete'" type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table
			class="table"
			v-loading="state.dataListLoading"
			:height="cardDetailsTableHeight"
			:data="state.dataList"
			border
			style="width: 100%"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="orgName" label="所属机构" header-align="center" align="center">{{ store.userStore.user.orgName }}</el-table-column>
			<el-table-column prop="submitType" label="提交类型">
				<template #default="scope">
					{{ submitOptions.length > 0 ? getTypeName(scope.row.submitType) : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="path" label="文件地址" header-align="center" align="center" width="160">
				<template #default="scope">
					<el-tooltip effect="dark" append-to=".table" popper-class="popper" :content="scope.row.path" placement="bottom-start">
						<div class="text">
							{{ scope.row.path }}
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="mainClass" label="主类" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-tooltip effect="dark" append-to=".table" popper-class="popper" :content="scope.row.mainClass" placement="bottom-start">
						<div class="text">
							{{ scope.row.mainClass }}
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="params" label="参数" header-align="center" align="center" width="200">
				<template #default="scope">
					<el-tooltip effect="dark" append-to=".table" popper-class="popper" :content="scope.row.params" placement="bottom-start">
						<div class="text">
							{{ scope.row.params }}
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="note" label="备注" header-align="center" align="center"></el-table-column>
			<fast-creator-column prop="creator" label="创建者" header-align="center" align="center"></fast-creator-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button v-auth="'data-development:jarpackage-manage:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)"
						>修改</el-button
					>
					<el-button v-auth="'data-development:jarpackage-manage:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="Data-developmentCluster-configurationIndex">
import { useCrud } from '@/hooks'
import { onMounted, reactive, ref } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import { useDictProviceApi } from '@/api/sys/dict'
import store from '@/store'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-development/jar/page',
	deleteUrl: '/data-development/jar',
	queryForm: {
		name: '',
		submitType: ''
	}
})
onMounted(() => {
	getdict()
	getCardDetailsTableHeight()
})
const cardDetailsTableHeight: any = ref()
// 动态设置表格高度
const getCardDetailsTableHeight = () => {
	let tableH = 260 //距离页面下方的高度
	let tableHeightDetil = window.innerHeight - tableH
	if (tableHeightDetil <= 100) {
		cardDetailsTableHeight.value = 100
	} else {
		cardDetailsTableHeight.value = window.innerHeight - tableH
	}
}
// 监听窗口变化动态设置表格高度
window.onresize = () => {
	getCardDetailsTableHeight()
}
const submitOptions = ref([])
// 获取字典
const getdict = () => {
	const params = {
		page: 1,
		limit: 1000,
		dictType: 'flink_jar_submit_type',
		patientId: 0
	}
	let str = ''
	for (let key in params) {
		if (str) {
			str = str + '&' + key + '=' + params[key]
		} else {
			str = key + '=' + params[key]
		}
	}
	useDictProviceApi(str).then(res => {
		if (res.data.list.length > 0) {
			res.data.list.forEach(item => {
				item.label = item.dictLabel
				item.value = Number(item.dictValue)
			})
		}
		submitOptions.value = res.data.list
	})
}
const getTypeName = id => {
	let typeName = submitOptions.value.filter(item => id == item.value)[0].label
	return typeName
}

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
<style lang="scss" scoped>
.text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; /* 指定最多显示两行 */
}
.table ::v-deep(.popper) {
	max-width: 300px;
}
</style>